<template>
  <el-dialog v-model="visible" width="550px" height="50vh" destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false">
    <el-steps
        :active="active"
        :align-center="true"
        finish-status="success"
    >
      <el-step title="日期"/>
      <el-step title="客户"/>
      <el-step title="项目"/>
      <el-step title="上传文件"/>
    </el-steps>
    <div class="step-content">
      <el-row :gutter="5" v-if="active === 0">
        <el-col :span="24">
          <el-date-picker v-model="form.ym" type="month" style="width: 100%" @change="onChangeMonth"/>
        </el-col>
      </el-row>
      <el-row :gutter="5" v-if="active === 1">
        <el-col :span="24">
          <el-select v-model="form.clienteleId" placeholder="请选择客户" @change="onClientele">
            <el-option v-for="item in clienteleList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="5" v-else-if="active === 2">
        <el-col :span="12">
          <el-select v-model="form.projectId" placeholder="请选择项目" @change="onProject">
            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-select v-model="form.teamId" :disabled="teamList.length === 0" placeholder="班组信息" @change="onTeam">
            <el-option v-for="item in teamList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="5" v-else-if="active === 3">
        <sc-upload-file :data="form" drag :limit="1" :onSuccess="onSuccess" :showFileList="false"
                        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
          <el-icon class="el-icon--upload">
            <el-icon-upload-filled/>
          </el-icon>
          <div class="el-upload__text">将文件拖入到这里或 <em>点击上传</em></div>
        </sc-upload-file>
      </el-row>
    </div>

  </el-dialog>
</template>

<script>

import {dayjs} from "element-plus";

export default {
  data() {
    return {
      id: null,
      saving: false,
      loading: true,
      visible: false,
      form: {
        ym: '' // 中间变量，提交时需删除
      },
      rules: {
        name: [
          {required: true, message: '请输入名称'}
        ]
      },
      active: 0,
      teamList: [],
      projectList: [],
      clienteleList: []
    }
  },
  mounted() {
    this.$API.clientele.list.get().then(res => {
      if (res.success) this.clienteleList = res.data;
    })
  },
  methods: {
    open() {
      this.visible = true;
      return this
    },
    onSuccess() {
      this.$message.success("导入成功");
      this.$emit('success');
      this.visible = false;
      return this.visible = false;
    },
    onClientele(value) {
      this.$API.project.list.get({id: value}).then(res => {
        if (res.success) {
          this.projectList = res.data;
          if (this.projectList.length > 0) {
            this.active = 2;
          } else this.$message.warning("当前客户没有建项")
          this.teamList.length = 0
        }
      });
    },
    onProject(value) {
      const current = this.projectList.find(ele => ele.id === value);
      if (current.teamList.length > 0) {
        this.teamList = current.teamList;
      } else this.active = 3;
    },
    onTeam(value) {
      this.active = 3;
    },
    onChangeMonth(value){
      this.form.date = dayjs(value).format('YYYY-MM-DD')
      this.active = 1
    }
  }
}
</script>

<style lang="less" scoped>
.step-content {
  width: 100%;
  padding: 45px 25px;
}
</style>
